
<template>
    <div>
        <el-form :inline="true" :model="query" class="query-form" size="small">
            <el-form-item>
                <el-date-picker
                    v-model="createTime"
                    type="datetimerange"
                    :picker-options="pickerOptions"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="left"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :default-time="['00:00:00','23:59:59']"
                    @change="dateChange"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
            @selection-change="handleSelectionChange"
            border
        >
            <el-table-column type="selection" width="50" fixed/>
            <el-table-column label="ID" prop="opinionbackid" :show-overflow-tooltip="true" align="center" width="150"/>
            <el-table-column label="用户昵称" prop="usernick" :show-overflow-tooltip="true" align="center" width="250"/>
            <el-table-column label="手机号码" prop="phone" :show-overflow-tooltip="true" align="center" width="250"/>
            <el-table-column
                label="反馈内容"
                prop="content"
                :show-overflow-tooltip="true"
                align="left"
                width="500"
            />
            <el-table-column label="添加时间" :show-overflow-tooltip="true" align="center"  >
                <template slot-scope="scope">
                    <i class="el-icon-time" v-if="scope.row.createtime!=null"></i>
                    <span
                        v-if="scope.row.createtime!=null"
                    >{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column width="200" label="操作" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="primary"
                        size="mini"
                        @click.native="handleForm(scope.$index, scope.row)"
                    >查看</el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        @click.native="handleDel(scope.row.opinionbackid)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="left-container">
            <el-button type="danger" size="small" @click="delGroup()">删除已选</el-button>
            <transition name="el-fade-in-linear">
                <el-button size="small" @click="toggleSelection()" v-show="cancelToggle">取消选择</el-button>
            </transition>
        </div>
        <el-pagination
            class="pagination-container"
            background
            :page-size="query.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total,sizes,prev, pager, next, jumper"
            :page-sizes="[10, 20, 30, 50]"
            :total="totalNumber"
        ></el-pagination>
        <!--表单-->
        <el-dialog
            :title="formMap[formName]"
            :visible.sync="formVisible"
            :before-close="hideForm"
            width="800px"
            top="5vh"
            v-dialogDrag
        >
            <el-form :model="formData" :rules="formRules" ref="dataForm">
                <el-form-item label="手机号码" width="250">{{formData.phone}}</el-form-item>
                <el-form-item label="反馈内容">
                    <el-input
                        type="textarea"
                        :rows="2"
                        v-model="formData.content"
                        readonly="true">
                    </el-input>
                </el-form-item>
                <el-form-item label="反馈图片" width="250" v-if="formData.urls !=-null">
                    <div style="display: inline-block; width: 80px" v-for="(item,index) in urllist" :key="index">
                        <el-popover v-if="item" placement="right" trigger="hover">
                            <img :src="item" style="width:400px;border-radius:3px;">
                            <img slot="reference" :src="item" style="height: 80px;width: 60px;border-radius:5px;">
                        </el-popover>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="formData.state===0">
                <el-button @click.native="hideForm">取消</el-button>
                <el-button type="primary" @click.native="formSubmit()" :loading="formLoading">发送</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getList,
        delOpinionback
    } from "../../api/sysOpinionBack/sysOpinionback";
    const formJson = {
        opinionbackid: "",
        usernick: "",
        phone: "",
        content: ""
    };
    export default {
        data() {
            return {
                pickerOptions: {
                    shortcuts: [
                        {
                            text: "最近一周",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 7
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近一个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 30
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近三个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 90
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        },
                        {
                            text: "最近六个月",
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(
                                    start.getTime() - 3600 * 1000 * 24 * 180
                                );
                                picker.$emit("pick", [start, end]);
                            }
                        }
                    ]
                },
                cancelToggle: false,
                createTime: [],
                query: {
                    startTime: "",
                    endTime: "",
                    userNick: "",
                    currentPage: 1,
                    pageSize: 10
                },
                list: [],
                totalNumber: 0,
                loading: true,
                index: null,
                formName: null,
                formMap: {
                    add: "添加",
                    detail: "详情"
                },
                urllist:[],
                formLoading: false,
                formVisible: false,
                formData: formJson,
                formRules: {
                    replydesc: {
                        required: true,
                        message: "请输入回复内容",
                        trigger: "blur"
                    }
                },
                multipleSelection: [] //多选集合
            };
        },
        methods: {
            dateChange(val) {
                if (val == null) {
                    this.query.startTime = "";
                    this.query.endTime = "";
                } else {
                    this.query.startTime = val[0];
                    this.query.endTime = val[1];
                }
                this.getList();
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                if (val == "") {
                    this.cancelToggle = false;
                    return;
                }
                this.cancelToggle = true;
            },
            delGroup() {
                var ids = this.multipleSelection
                    .map(item => item.opinionbackid)
                    .join(); //获取所有选中行的id组成的字符串，以逗号分隔
                if (ids == "") {
                    this.$message({
                        message: "请先选择",
                        type: "warning"
                    });
                    return;
                }
                this.handleDel(ids);
            },
            onRest() {
                this.$router.push({
                    path: ""
                });
                this.query = {
                    startTime: "",
                    endTime: "",
                    searchText: "",
                    doctorEvaluateInquiry: "",
                    currentPage: 1,
                    pageSize: 10
                };
                this.createTime = [];
                this.getList();
            },
            onSubmit() {
                this.$router.push({
                    path: ""
                    //query: this.query
                });
                this.getList();
            },
            handleCurrentChange(val) {
                this.query.currentPage = val;
                //scrollTo(0, 800);
                this.getList();
            },
            handleSizeChange(val) {
                this.query.pageSize = val;
                this.getList();
            },
            getList() {
                this.loading = true;
                getList(this.query)
                    .then(response => {
                        if (response.code) {
                            this.$message.error(response.message);
                        }
                        this.list = response.data.list || [];
                        this.totalNumber = response.data.totalNumber || 0;
                        setTimeout(() => {
                            this.loading = false;
                        }, 0.3 * 1000);
                    })
                    .catch(() => {
                        this.loading = false;
                        this.list = [];
                        this.totalNumber = 0;
                    });
            },
            // 隐藏表单
            hideForm() {
                // 更改值
                this.formVisible = !this.formVisible;
                this.urllist=[];
                // 清空表单
                this.$refs["dataForm"].resetFields();
                return true;
            },
            // 显示表单
            handleForm(index, row) {
                this.formVisible = true;
                this.formData = Object.assign({}, formJson);
                if (row !== null) {
                    this.formData = Object.assign({}, row);
                    this.urllist=this.formData.urls.split(",");
                }
                //查看
                if (index !== null) {
                    this.index = index;
                    this.formName = "detail";
                }
            },
            formSubmit() {
                this.$refs["dataForm"].validate(valid => {
                    if (valid) {
                        // this.formLoading = true;
                        // let data = new URLSearchParams(this.formData);
                        // editOpinionback(data).then(response => {
                        //     this.formLoading = false;
                        //     if (response.code) {
                        //         this.$message.error(response.message);
                        //         return false;
                        //     }
                        //     this.$message.success("操作成功");
                        //     // 刷新表单
                        //     this.$refs["dataForm"].resetFields();
                        //     this.formVisible = false;
                        //     // 加载表格数据
                        //     this.getList();
                        // });
                    }
                });
            },
            // 删除
            handleDel(ids) {
                if (ids) {
                    this.$confirm("确认要删除吗?", "提示", {
                        type: "warning"
                    })
                        .then(() => {
                            this.loading = true;
                            var params = new URLSearchParams();
                            params.append("ids", ids);
                            delOpinionback(params)
                                .then(response => {
                                    this.loading = false;
                                    if (response.code) {
                                        this.$message.error(response.message);
                                        return false;
                                    }
                                    this.$message.success("删除成功");
                                    // 刷新数据
                                    this.getList();
                                })
                                .catch(() => {
                                    this.loading = false;
                                });
                        })
                        .catch(() => {});
                }
            }
        },
        mounted() {},
        filters: {
            typeFilterType(status) {
                const statusMap = {
                    0: "success",
                    1: "warning",
                    2: "danger"
                };
                return statusMap[status];
            },
            typeFilterName(status) {
                const statusMap = {
                    0: "使用遇到问题",
                    1: "针对产品提出建议",
                    2: "其他反馈问题"
                };
                return statusMap[status];
            },
            stateFilterType(status) {
                const statusMap = {
                    0: "danger",
                    1: ""
                };
                return statusMap[status];
            },
            stateFilterName(status) {
                const statusMap = {
                    0: "待回复",
                    1: "已回复"
                };
                return statusMap[status];
            }
        },
        created() {
            // 将参数拷贝进查询对象
            let query = this.$route.query;
            this.query = Object.assign(this.query, query);
            this.query.pageSize = parseInt(this.query.pageSize);
            // 加载表格数据
            this.getList();
        }
    };
</script>

<style type="text/scss" lang="scss">
    body {
        margin: 0;
    }
</style>
